import { styled } from '@mui/material/styles'
import { gridSpacing } from '@/store/constant'
const CardStyle = styled(Card)(({ theme }) => ({
  background: theme.palette.warning.light,
  marginTop: '16px',
  marginBottom: '16px',
  overflow: 'hidden',
  position: 'relative',
  '&:after': {
    content: '""',
    position: 'absolute',
    width: '200px',
    height: '200px',
    border: '19px solid ',
    borderColor: theme.palette.warning.main,
    borderRadius: '50%',
    top: '65px',
    right: '-150px'
  },
  '&:before': {
    content: '""',
    position: 'absolute',
    width: '200px',
    height: '200px',
    border: '3px solid ',
    borderColor: theme.palette.warning.main,
    borderRadius: '50%',
    top: '145px',
    right: '-70px'
  }
}))

const index = () => {
  const { tokenInfo } = useSelector((state) => state.user)
  const hours = dayjs().hour()
  return (
    <CardStyle>
      <CardContent>
        <Grid container direction="column" spacing={2}>
          <Grid item>
            <Typography variant="h3">
              {`Good ${hours < 12 ? 'Morning' : 'Afternoon'}`}, {tokenInfo.name}
            </Typography>
          </Grid>
          <Grid item>
            <Typography variant="subtitle" color="grey.900" sx={{ opacity: 0.6 }}>
              Welcome to the Healux Admin Dashboard!
            </Typography>
          </Grid>
          <Grid item>
            <Stack direction="row">
              <Button variant="contained" color="warning" sx={{ boxShadow: 'none' }}>
                Ready Go
              </Button>
            </Stack>
          </Grid>
        </Grid>
      </CardContent>
    </CardStyle>
  )
}

export default index
